<template>
  <div v-wechat-title="$route.meta.title"></div>
  <Header />
  <div class="home">
    <br>
    <div id="search">
      <a-col :span="12" :offset="6">
      <a-input-search
        v-model:value="value"
        placeholder="请输入要查找的内容"
        enter-button
        show-count 
        :maxlength="20"
        @search="onSearch"
        class="search-input"
      />
      </a-col>
    </div>
    <br>
    <div v-if="articles.data == ''">
        <div id="no-search-text">
            没有找到您要查找的文章哦 <frown-outlined />
        </div>    
    </div>
    <div v-else>
        <div v-for="article in articles.data" v-bind:key="article.id" id="card">
            <a-col :span="12">
                <el-card class="box-card" shadow="hover">
                <router-link
                    :to="{ name: 'ArticleDetail', params: { id: article.id } }"
                    class="article-title"
                >
                    {{ article.title }}
                </router-link>
                &nbsp;
                <span class="created-time"
                    >{{ dateformat(article.created_at) }} created</span
                >
                &nbsp;

                <span class="created-time">文章类别：
                    <span>{{article.Category.name}}</span>
                </span>
                &nbsp;

                <span class="created-time">作者：{{ article.user_name }}</span>
                &nbsp;
                
                <span class="created-time"><heart-outlined :style="{fontSize: '20px', color: 'red'}" />likes:{{ article.stars }}</span>
                </el-card>
            </a-col>
        </div>
        <div class="pagination">
            <el-pagination
                small
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :total="articles.total"
                :page-size="pageSize"
                :current-page="pageNum"
            >
            </el-pagination>
        </div>
    </div>
    
  </div>

  <Footer />
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

import articleService from "@/service/articleService";
import dateformat from "@/utils/dateformat";

import { ref } from 'vue';
import { useRouter } from "vue-router";

import { HeartOutlined, FrownOutlined } from '@ant-design/icons-vue';

export default {
  name: "Home",
  components: { Header, Footer, HeartOutlined, FrownOutlined  },
  
  setup() {
    const value = ref('');
    const router = useRouter();

    const onSearch = searchValue => {
      router.push({name:'Search',params: {title:searchValue}})
    };

    return {
      value,
      onSearch,
    };
  },

  data() {
    return {
      articles: "",
    };
  },

  mounted() {
    articleService.search_article(this.$route.params.title)
      .then((response) => (this.articles = response.data.data));
  },

  methods: {
    dateformat,
    getData(n1, n2) {
      articleService.get_pagelist("page/list?pageNum="+n2+"&pageSize="+n1)
        .then((response) => (this.articles = response.data.data));
    },
    handleCurrentChange(val) {
      this.pageSize = 10;
      this.pageNum = val;
      this.getData(this.pageSize, val);
    },
    update(){
      this.$router.go(0)
    }
  },
  created: function () {
    this.getData(this.pageSize, this.pageNum);
  },
};
</script>

<style scoped>
#card {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.box-card {
  margin-bottom:10px;
}
.article-title {
  color: black;
  text-decoration: none;
  padding: 5px 0 5px 0;
  font-family: "Ubuntu", "Noto Serif SC", source-han-serif-sc, sans-serif;
  font-weight: 700;
  font-style: normal;
}
.article-title:hover {
  color: grey;
}
.created-time {
  font-size: 13px;
  display: flex;
  justify-content: right;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#no-search-text{
  text-align: center;
  font-family:"Times New Roman";
  font-size:30px;
}
</style>
